<!-- 题目正误呈现 组件 -->

<template>
	<!-- 一个题号对象 -->
	<focus-box width="124" height="150" margin="32"
	mode="col" justify="start" align="center"
	position="relative">
		
		<!-- 题号容器 -->
		<focus-box width="116" height="116" position="relative">
			
			<!-- 背景透明圆框 -->
			<focus-box width="116" height="116"
			position="absolute" left="0" top="0"
			bg="white" radius="60" :styles="{'opacity':0.2}"></focus-box>
			
			<!-- 实底序号框 -->
			<focus-box width="100" height="100"
			mode="col" justify="center" align="center"
			position="absolute" left="8" top="8"
			bg="white" radius="50">
				<focus-text size="36" color="content" weight="bold" :text="order"></focus-text>
			</focus-box>
			
		</focus-box>
		
		<!-- 正误容器 -->
		<focus-box width="124" height="52" position="absolute" left="0" bottom="0">
			
			<!-- 作答正确 -->
			<view v-if="istrue==true" class="question-result-order-box-right">
				<!-- 勾图标 -->
				<image class="question-result-order-img-zw" src="@/pagesB/static/img/question/right.png"></image>
				<!-- 描述文字 -->
				<focus-text size="24" color="white" text="正确"></focus-text>
			</view>
			
			<!-- 作答错误 -->
			<view v-else class="question-result-order-box-err">
				<!-- 勾图标 -->
				<image class="question-result-order-img-zw" src="@/pagesB/static/img/question/close.png"></image>
				<!-- 描述文字 -->
				<focus-text size="24" color="white" text="错误"></focus-text>
			</view>
			
		</focus-box>
		
	</focus-box>
</template>


<script>
	/**
	 * 题目正误呈现组件
	 * @description 题目正误呈现组件，杜先生开发。推荐在564rpx的容器中使用
	 * @property {String} tag 组件标识，默认：order-item
	 * @property {String,Number} order 题目序号
	 * @property {Boolean} istrue 是否答对
	 */
	export default {
		name: 'order-item',
		props: {
			tag: { type: String, default: 'order-item' },
			order: { type: [String,Number], default: 0 },
			istrue: { type: Boolean, default: false },
		},
	}
</script>


<style>
	/* 正确渐变容器 */
	.question-result-order-box-right{
		width: 124rpx; height: 52rpx;
		border-radius: 26rpx;
		background-image: linear-gradient(to bottom, #18E279, #07C05F);
		box-shadow: 0 2px 2px #05AC43;
		display: flex; flex-direction: row; justify-content: center; align-items: center;
	}
	/* 错误渐变容器 */
	.question-result-order-box-err{
		width: 124rpx; height: 52rpx;
		border-radius: 26rpx;
		background-image: linear-gradient(to bottom, #FB7548, #FD390A);
		box-shadow: 0 2px 2px #FB2608;
		display: flex; flex-direction: row; justify-content: center; align-items: center;
	}
	/* 正误图标 */
	.question-result-order-img-zw{
		width: 24rpx; height: 24rpx;
		margin-right: 8rpx;
	}
</style>